
// 侧边导航栏
const body = document.querySelector('body'),
shell = body.querySelector('nav'),
toggle = body.querySelector(".toggle"),
searchBtn = body.querySelector(".search-box"),
modeSwitch = body.querySelector(".toggle-switch"),
modeText = body.querySelector(".mode-text");
// 点击toggle元素时触发事件
toggle.addEventListener("click", () => {
// 切换shell元素的close类
shell.classList.toggle("close");
})
// 点击searchBtn元素时触发事件
searchBtn.addEventListener("click", () => {
// 移除shell元素的close类
shell.classList.remove("close");
})
// 点击modeSwitch元素时触发事件
// modeSwitch.addEventListener("click", () => {
// // 切换body元素的dark类
// body.classList.toggle("dark");
// // 如果body元素包含dark类
// if (body.classList.contains("dark")) {
//     modeText.innerText = "白日模式";
// } else {
//     modeText.innerText = "夜间模式";
// }
// }); 


//景点
const panels = document.querySelectorAll('.panel')
const containerjingdian  =document.querySelector('container-jingdian')
window.addEventListener('scroll', function() {
  // 获取页面滚动的垂直距离
  var scrollTop =document.documentElement.scrollTop;
  
  // 判断滚动距离是否大于 300 像素
  if (scrollTop > 1000) {
    // 设置盒子为固定定位
   panels.style.position = 'fixed';
    panels.style.top = '0';
  } else {
    // 恢复盒子的默认定位
    panels.style.position = 'static';
  }
});
panels.forEach(panel => {
    panel.addEventListener('click', () => {
        console.log(panel);
        removeActiveClass()
        panel.classList.add('active')
    })
});

function removeActiveClass() {
    panels.forEach(panel => {
        panel.classList.remove('active')
    });

}




//  路线
var  prev1=document.querySelector('.prev1')
var  next1=document.querySelector('.next1')







// 轮播图
const data = [
    { url: '../image/jingse/利士多.jpeg', title: '利士多', color: 'rgb(100, 67, 68)' },
    { url: '../image/jingse/许爱周.jpg', title: '许爱周', color: 'rgb(43, 35, 26)' },
    { url: '../image/jingse/老街.jpg', title: '古玩街', color: 'rgb(36, 31, 33)' },
    { url: '../image/jingse/宾馆.jpg', title: '新华宾馆', color: 'rgb(139, 98, 66)' },
    { url: '../image/jingse/新华书店.jpg', title: '新华书店', color: 'rgb(67, 90, 92)' },
    { url: '../image/jingse/商会馆.jpg', title: '商会馆', color: 'rgb(166, 131, 143)' },
    { url: '../image/jingse/时间集物.jpg', title: '时间集物', color: 'rgb(53, 29, 25)' },
    { url: '../image/jingse/公园.jpg', title: '公园', color: 'rgb(99, 72, 114)' },
  ]
  // 获取元素
  const img = document.querySelector('.slider-wrapper img')
  const p = document.querySelector('.slider-footer p')
  const footer = document.querySelector('.slider-footer')
  // 1. 右按钮业务
  // 1.1 获取右侧按钮 
  const next = document.querySelector('.next')
  let i = 0  // 信号量 控制播放图片张数
  // 1.2 注册点击事件

  next.addEventListener('click', function () {
    // console.log(11)
    i++
    // 1.6判断条件  如果大于8 就复原为 0
    // if (i >= 8) {
    //   i = 0
    // }
    i = i >= data.length ? 0 : i
    // 1.3 得到对应的对象
    // console.log(data[i])
    // 调用函数
    lunbotoggle()
  })

  // 2. 左侧按钮业务
  // 2.1 获取左侧按钮 
  const prev = document.querySelector('.prev')
  // 1.2 注册点击事件
  prev.addEventListener('click', function () {
    i--
    // 判断条件  如果小于0  则爬到最后一张图片索引号是 7
    // if (i < 0) {
    //   i = 7
    // }
    i = i < 0 ? data.length - 1 : i
    // 1.3 得到对应的对象
    // console.log(data[i])
    // 调用函数
    lunbotoggle()
  })

  // 声明一个渲染的函数作为复用
  function lunbotoggle() {
    // 1.4 渲染对应的数据
    img.src = data[i].url
    p.innerHTML = data[i].title
    footer.style.backgroundColor = data[i].color
    // 1.5 更换小圆点    先移除原来的类名， 当前li再添加 这个 类名
    document.querySelector('.slider-indicator .lunbo-active').classList.remove('lunbo-active')
    document.querySelector(`.slider-indicator li:nth-child(${i + 1})`).classList.add('lunbo-active')
  }



  // 3. 自动播放模块
  let timerId = setInterval(function () {
    // 利用js自动调用点击事件  click()  一定加小括号调用函数
    next.click()
  }, 1000)


  // 4. 鼠标经过大盒子，停止定时器
  const slider = document.querySelector('.slider')
  // 注册事件
  slider.addEventListener('mouseenter', function () {
    // 停止定时器
    clearInterval(timerId)
  })

  // 5. 鼠标离开大盒子，开启定时器
  // 注册事件
  slider.addEventListener('mouseleave', function () {
    // 停止定时器
    if (timerId) clearInterval(timerId)
    // 开启定时器
    timerId = setInterval(function () {
      // 利用js自动调用点击事件  click()  一定加小括号调用函数
      next.click()
    }, 1000)
  })


// 第二个轮播 
 
const data2 = [
  { url: '../image/jingse/喜盈门.jpg', title: '喜盈门', color: 'rgb(100, 67, 68)' },
  { url: '../image/jingse/咖啡.jpg', title: '咖啡', color: 'rgb(43, 35, 26)' },
  { url: '../image/jingse/海鲜店.jpg', title: '海鲜店', color: 'rgb(36, 31, 33)' },
  { url: '../image/jingse/菠萝街.jpg', title: '菠萝街', color: 'rgb(139, 98, 66)' },
  { url: '../image/jingse/公园.jpg', title: '公园', color: 'rgb(67, 90, 92)' },
  { url: '../image/jingse/商会馆.jpg', title: '商会馆', color: 'rgb(166, 131, 143)' },
  { url: '../image/jingse/许爱周.jpg', title: '许爱周', color: 'rgb(53, 29, 25)' },
  { url: '../image/jingse/朱朝阳.jpg', title: '朱朝阳', color: 'rgb(99, 72, 114)' },
]
// 获取元素
const img2 = document.querySelector('.slider-wrapper2 img')
const p2 = document.querySelector('.slider-footer2 p')
const footer2 = document.querySelector('.slider-footer2')
// 1. 右按钮业务
// 1.1 获取右侧按钮 
const next2 = document.querySelector('.next2')
let j = 0  // 信号量 控制播放图片张数
// 1.2 注册点击事件

next2.addEventListener('click', function () {
  // console.log(11)
  j++
  // 1.6判断条件  如果大于8 就复原为 0
  // if (i >= 8) {
  //   i = 0
  // }
  j = j >= data2.length ? 0 : j
  // 1.3 得到对应的对象
  // console.log(data[i])
  // 调用函数
  lunbotoggle2()
})

// 2. 左侧按钮业务
// 2.1 获取左侧按钮 
const prev2 = document.querySelector('.prev2')
// 1.2 注册点击事件
prev2.addEventListener('click', function () {
  j--
  // 判断条件  如果小于0  则爬到最后一张图片索引号是 7
  // if (i < 0) {
  //   i = 7
  // }
  j = j < 0 ? data2.length - 1 : j
  // 1.3 得到对应的对象
  // console.log(data[i])
  // 调用函数
  lunbotoggle2()
})

// 声明一个渲染的函数作为复用
function lunbotoggle2() {
  // 1.4 渲染对应的数据
  img2.src = data2[j].url
  p2.innerHTML = data2[j].title
  footer2.style.backgroundColor = data2[j].color
  // 1.5 更换小圆点    先移除原来的类名， 当前li再添加 这个 类名
  document.querySelector('.slider-indicator2 .lunbo-active2').classList.remove('lunbo-active2')
  document.querySelector(`.slider-indicator2 li:nth-child(${j + 1})`).classList.add('lunbo-active2')
}



// 3. 自动播放模块
let timerId2 = setInterval(function () {
  // 利用js自动调用点击事件  click()  一定加小括号调用函数
  next2.click()
}, 1000)


// 4. 鼠标经过大盒子，停止定时器
const slider2 = document.querySelector('.slider2')
// 注册事件
slider2.addEventListener('mouseenter', function () {
  // 停止定时器
  clearInterval(timerId2)
})

// 5. 鼠标离开大盒子，开启定时器
// 注册事件
slider2.addEventListener('mouseleave', function () {
  // 停止定时器
  if (timerId2) clearInterval(timerId2)
  // 开启定时器
  timerId2 = setInterval(function () {
    // 利用js自动调用点击事件  click()  一定加小括号调用函数
    next2.click()
  }, 1000)
})


//   美食板块
const boxes = document.querySelectorAll('.box-meishi')
const delta = Event.deltay
const containermeishi = document.querySelector('.container-meishi')
containermeishi.addEventListener('scroll', checkBoxes);

checkBoxes()

function checkBoxes() {
    const triggerBottom = containermeishi.clientHeight / 10* 6

    boxes.forEach(box => {
        const boxTop = box.getBoundingClientRect().top
        if (boxTop < triggerBottom) {
            box.classList.add('show')

        } else {
            box.classList.remove('show')
        }
    })
}



// 获取盒子容器
const imagemeishi = document.getElementById('image-meishi');

// 背景图片数组
// const backgroundImages = [
//   'url('../imgage/meishi/海鲜粥.webp')', // 请替换为实际图片路径
//   'url("image2.jpg")', // 请替换为实际图片路径
//   'url("image3.jpg")', // 请替换为实际图片路径
//   // ... 添加更多图片路径
// ];

// 盒子数量
const numberOfBoxes = 8;

// 创建并设置盒子
for (let i = 0; i < numberOfBoxes; i++) {
  // 创建一个新盒子
  const box = document.createElement('div');
  box.className = 'box';

  // 设置背景图片
  // 确保背景图片数组足够大，以避免索引越界
  if (i < backgroundImages.length) {
    box.style.backgroundImage = backgroundImages[i];
  }

  // 将盒子添加到容器中
  boxesContainer.appendChild(box);
}